<template>
	<view>
			<div class="staff">
					<div class="staff_list" style="background-color: #D9D9D9;position: fixed; width: 100%;border-top-left-radius: 20px;
					border-top-right-radius: 20px;
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 0;
					"  > 
						<text >
							请选择
						</text>
					</div><br><br>
					<div class="input_sarch">
						<div class="sarch_input">
							<input v-model="name_list" placeholder="请输入搜索内容"/>
						</div>
						<!-- <div class="sarch_text" @click="search_name">
							<text>搜索</text>
						</div> -->
					</div>
					<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
						<div style="margin-top:80rpx; background-color: #fff;z-index: 1;">
							<div class="staff_obj_list"  v-for="(item,index) in dataSorce"  @click="buttonput"  @touchstart="setnames(item)">
								<span v-if="run == item.name" class="staff_text text_color_class" >
									<text  :style="item.name == color_name ? text_color : ''" >{{item.name}}</text>
								</span>
								<span v-else class="staff_text" >
									<text  :style="item.name == color_name ? text_color : ''"  >{{item.name}}</text>
								</span>
							</div>
						</div>
					</scroll-view>

			</div>
	</view>
</template>

<script>
export default {
	props:{
		dataSorc:{
			default: ''
		},
		rundata: {
			default:''
		},
		titles: {
			default: ''
		},
		alertType: {	// 搜索是否请求接口
			default: ''
		}
	},
	data(){
		return {
			dataSorce: '',
			run: '',
			color_name: '',
			text_color: '',
			result_data: '',
			text_color_class: '',
			name_list: '',
			title: ''
		}
	},
	mounted(){
		this.dataSorce = this.dataSorc;
		this.run = this.rundata;
		this.title = this.titles;
	},
	watch:{
		name_list(a,b){
			// console.log(a,'-------',b)
			this.search_name(a);
		}
	}, 
	methods:{
		setnames(val){
			this.result_data = val;
			this.color_name = val.name;
			this.text_color = "color: #1890ff;";
		},
		search_name(val){
			let _this = this;
			this.dataSorce = [];
			if(val == ''){
				uni.showToast({
					title: '请输入搜索信息',
					icon: 'none'
				})
				this.dataSorce = this.dataSorc;
				return false;
			}else{
				this.dataSorce = this.dataSorc.filter(item => item.name.indexOf(val) > -1 )
			}
		},
		buttonput(){
			if(this.result_data == ''){ 
				uni.showToast({
					title: '请选择一条信息',
					icon: 'error'
				})
				return false;
			}
			this.$emit('row',this.result_data);
		},
		close(){
			this.$emit('closes')
		},
		// 清空
		clearout(){
			this.name_list = '';
		}
		
	}
}	
</script>

<style scoped lang="scss">
	.staff {
		background-color: #fff;
		// width: 500rpx;
		height:  700rpx;
		border-radius: 20px;
		.staff_b {
			height: 85%;
			// overflow: auto;
		
				.staff_obj_list {
					width: 90%;
					// text-align: center;
					margin: auto;
					padding:20rpx 0 20rpx 0;
					border-bottom: 1px solid #f0f0f0;
					.staff_text {
						padding: 10px 10px 10px 10px;
						
					}
				}
				.staff_list_top {
					margin-top: 40rpx;
			}
		}
		
		.staff_button {
			display: flex;
			padding: 40rpx 0 0 0;
			width: 100%;
			height: 85px;
			line-height: 85px;
			border-top: 1px solid #f0f0f0;
			button {
				font-size: 16px;
				height: 55px;
				line-height: 55px;
				width: 100%;
				background-color: #1890ff;
				color: #fff;
				bottom: 25px;
			}
		}
	}
	
	.staff_list {
		width: 90%;
		text-align: center;
		margin: auto;
		padding:20rpx 0 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	
	}
	.text_color_class {
		color: #1890ff;
	}
	.input_sarch {
		z-index: 99;
		// border: 1px solid red;
		position: fixed;
		display: flex;
		height: 90rpx;
		width: 95%;
		margin: auto;
		background-color: #fff;
		.sarch_input {
			width: 100%;
			// margin-top: -3px;
			padding-left: 25rpx;
			input {
				border: 1px solid #cacaca;
				border-radius: 4px;
				width: 95%;
			}
			
		}
		.sarch_text {
			width: 30%;
			text-align: center;
			margin-top: 3px;
			text {
				height: 90rpx;
				line-height: 80rpx;
				text-align: center;
				padding: 10rpx 35rpx 10rpx 35rpx;
				background-color: #1890ff;
				color: #fff;
				border-radius: 4px;
			}
		}
		input:hover {
				border: 1px solid #1890ff;
		}
	}
</style>
